import React, { useState, useCallback, useEffect } from 'react';
import { Layout, Menu } from 'antd';
import { MenuUnfoldOutlined, MenuFoldOutlined, UserOutlined } from '@ant-design/icons';
import { matchRoutes, Outlet, useLocation } from 'react-router';
import { Link } from 'react-router-dom';

import router from './router';

import './AppLayout.css'

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

const AppLayout = () => {
    const [collapsed, setCollapsed] = useState(false);
    const [isInit, setIsInit] = useState(false);
    const [defaultSelectedKeys, setDefaultSelectedKeys] = useState<string[]>([]);
    const [defaultOpenKeys, setDefaultOpenKeys] = useState<string[]>([]);

    const location = useLocation();

    useEffect(() => {
        const routes = matchRoutes(router, location.pathname);
        let pathArr: string[] = [];
        if (routes !== null) {
            for (let route of routes) {
                let path = route.route.path;
                if (path) {
                    pathArr.push(path);
                }
            }
        }

        setDefaultOpenKeys(pathArr);
        setDefaultSelectedKeys(pathArr);
        setIsInit(true)
    }, [location.pathname]);

    const toggle = useCallback(() => {
        setCollapsed(!collapsed);
    }, [collapsed]);

    if (!isInit) {
        return null;
    }

    return (
        <div className="layout">
            <Layout>
                <Sider trigger={null} collapsible collapsed={collapsed}>
                    <div className="logo" />
                    <Menu theme="dark" mode="inline" defaultSelectedKeys={defaultSelectedKeys} defaultOpenKeys={defaultOpenKeys}>
                        <SubMenu key="/" icon={<UserOutlined />} title="用户管理">
                            <Menu.Item key="/user/list">
                                <Link to="/user/list">用户列表</Link>
                            </Menu.Item>
                            <Menu.Item key="/user/detail">
                                <Link to="/user/detail/:id">用户详情</Link>
                            </Menu.Item>
                            <Menu.Item key="/user/add">
                                <Link to="/user/add">添加用户</Link>
                            </Menu.Item>
                            <Menu.Item key="/user/delete">
                                <Link to="/user/delete">删除用户</Link>
                            </Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub2" icon={<UserOutlined />} title="subnav 2">
                            <Menu.Item key="4">option4</Menu.Item>
                            <Menu.Item key="5">option5</Menu.Item>
                            <Menu.Item key="6">option6</Menu.Item>
                        </SubMenu>
                        <SubMenu key="sub3" icon={<UserOutlined />} title="subnav 3">
                            <Menu.Item key="7">option7</Menu.Item>
                            <Menu.Item key="8">option8</Menu.Item>
                            <Menu.Item key="9">option9</Menu.Item>
                        </SubMenu>
                    </Menu>
                </Sider>
                <Layout className="site-layout">
                    <Header className="site-layout-background" style={{ padding: 0 }}>
                        {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
                            className: 'trigger',
                            onClick: toggle,
                        })}
                    </Header>
                    <Content
                        className="site-layout-background"
                        style={{
                            margin: '24px 16px',
                            padding: 24,
                            minHeight: 280,
                        }}
                    >
                        <Outlet />
                    </Content>
                </Layout>
            </Layout>
        </div>
    )
}

export default AppLayout;